<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right">                  
      </div>
    </div>
    <div class="content-wrap">
      <div class="chart-content">
        <el-table :row-style="{height:'.22rem'}" :cell-style="{padding:'.0396rem'}" :data="data" highlight-current-row stripe :header-cell-style="{background:'#02233B',color:'#ffffff'}" :row-class-name="tableRowClassName">
          <el-table-column prop="hname" label="医院名称" width="150rem"></el-table-column>
          <el-table-column prop="level" label="等级" ></el-table-column>
          <el-table-column prop="number" label="科室数量" ></el-table-column>
        </el-table>
      </div>                         
    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import 'echarts-liquidfill'
import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-single-analysis3-yiyuanliebiao',
  components:{Fragment},
  props:{
    title:{
      type:String
    },
    data:{
      type:Array
    }
  },

  methods:{
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
          return "warning-row"; //类名
      } else {
          return "success-row"; //类名
      }
    },
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
    }
  }
  .content-wrap{
    width: 99%;    
    margin-right: 1%;
    overflow: hidden;
    .chart-content{
      width: 99%;
      margin-right: 1%;
      float: left;
      height:calc( 100vh - 1.55rem) ;
      overflow: hidden;
      .el-table{
        background:none !important;
        color:#ffffff !important;
        margin-top:15px;
        /deep/.warning-row {
          background: #02233B !important
        }
        /deep/.success-row {
          background: none;
        }
        /deep/.el-table__body tr.current-row>td{
          background:#111F43 !important
        }
        /deep/.el-table__body tr:hover > td.el-table__cell{
          background:none !important
        }          
      }
      /deep/.el-table__header tr,.el-table__header th {
          padding: 0;
          margin:0;
          height: .2rem;
      }
      /deep/.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
        height: .2rem;
      }
      /deep/.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td {
          background:#031D39 /*替换为你需要的颜色，觉得优先级不够就加!important*/
      }
      /deep/ .el-table--medium .el-table__cell{
        padding:.05rem 0;
      }
    }
  }
  img{width: 100%;float: left;}
</style>